<template>
    <div :style="{margin: '20px'}">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <el-table :data="permissionList" row-key="id" :tree-props="{children: 'children'}"
                :expand-row-keys="expandRowKeys" border stripe>
                <el-table-column label="名称" prop="name">
                </el-table-column>

                <el-table-column label="权限值" prop="code">
                </el-table-column>

                <el-table-column label="跳转权限值" prop="toCode">
                </el-table-column>

                <el-table-column label="操作">
                    <template v-slot="{row}">
                        <el-button type="primary" size="mini" icon="el-icon-plus" @click="showAddDialog(row)"
                            :disabled="row.level === 4">
                        </el-button>
                        <el-button type="primary" size="mini" icon="el-icon-edit-outline" :disabled="row.level === 1"
                            @click="showUpdateDialog(row)"></el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" :disabled="row.level === 1"
                            @click="deletePermission(row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog :title="isUpdate ? '修改菜单' : '添加菜单'" :visible.sync="isShowDialog">
                <el-form label-width="100px" :inline="false" size="normal">
                    <el-form-item label="名称" required>
                        <el-input v-model="permissionName" size="small"></el-input>
                    </el-form-item>

                    <el-form-item label="功能权限值" required>
                        <el-input v-model="permissionCode" size="small"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer">
                    <el-button @click="isShowDialog = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="addOrUpdate" size="small">确 定</el-button>
                </span>
            </el-dialog>

        </el-card>

    </div>
</template>
<script>
import aclPermissionApi from '@/api/aclPermission'
import { Message } from 'element-ui';
export default {
    name: 'Permission',
    data() {
        return {
            permissionList: [],
            isShowDialog: false,
            permissionName: '',
            permissionCode: '',
            permissionLevel: '',
            permissionPid: '',
            permissionId: '',
            isUpdate: false
        };
    },
    mounted() {
        this.getPermissionList()
    },
    methods: {
        async getPermissionList() {
            try {
                const result = await aclPermissionApi.getPermissionList()
                if (result.code === 20000) {
                    this.permissionList = result.data.children
                } else {
                    Message.error('获取菜单列表失败')
                }
            } catch (error) {
                Message.error('请求获取菜单列表失败')
            }
        },
        async deletePermission(id) {
            try {
                const result = await aclPermissionApi.deletePermission(id)
                if (result.code === 20000) {
                    Message.success('删除成功')
                    this.getPermissionList()
                } else {
                    Message.error('删除失败')
                }
            } catch (error) {
                Message.error('请求删除失败')
            }
        },
        showAddDialog(row) {
            // row 是当前项, 添加的时候, 应该用这一项来当作父项
            // 所以取这一项的 id 作为新增项的 pid, 这一项的 level + 1 作为新增项的 level
            this.permissionPid = row.id
            this.permissionLevel = row.level + 1
            this.permissionName = ''
            this.permissionCode = ''
            this.isUpdate = false
            this.isShowDialog = true
        },
        showUpdateDialog(row) {
            this.permissionPid = row.pid
            this.permissionLevel = row.level
            this.permissionName = row.name
            this.permissionCode = row.code
            this.permissionId = row.id
            this.isUpdate = true
            this.isShowDialog = true
        },
        async addOrUpdate() {
            try {
                let { permissionName, permissionCode, permissionLevel, permissionPid, permissionId, isUpdate } = this
                let addOrUpdateParams = {
                    name: permissionName,
                    code: permissionCode,
                    level: permissionLevel,
                    pid: permissionPid
                }
                let result = null

                if (isUpdate) {
                    result = await aclPermissionApi.updatePerimission({ ...addOrUpdateParams, id: permissionId })
                } else {
                    result = await aclPermissionApi.addPermission(addOrUpdateParams)
                }

                if (result.code === 20000) {
                    Message.success(isUpdate ? '修改成功' : '添加成功')
                    this.getPermissionList()
                    this.isShowDialog = false
                } else {
                    Message.error(isUpdate ? '修改失败' : '添加失败')
                }
            } catch (error) {
                Message.error(this.isUpdate ? '请求修改失败' : '请求添加失败')
            }
        }
    },
    computed: {
        expandRowKeys() {
            let arr = []
            // if (this.permissionList[0]) {
            //     this.permissionList[0].children.forEach(item => {
            //         arr.push(item.id)
            //     })
            //     arr.push(this.permissionList[0].id)
            // }
            if (this.permissionList[0]) arr.push(this.permissionList[0].id)
            return arr
        }
    }
}
</script>

<style scoped>
::v-deep .el-table__row td {
    padding: 5px 0;
}
</style>
